<template>
    <div class="login">
        <div class="logo">
            <router-link to="/">{{ config.title }}后台管理系统</router-link>
        </div>
        <div class="login_m">
            <form action="javascript:;" method="post" id="form">
                <ul>
                    <li class="wz">
                        <span class="notification" id="usernameNotification" v-show="usernameNotification!=''">{{ usernameNotification }}</span>
                        用户名
                    </li>
                    <li><input name="username" @blur="validateLogin()" v-model="form.username" type="text" /></li>

                    <li class="wz">
                        <span class="notification" v-show="pwdNotification!=''">{{ pwdNotification }}</span>
                        密码
                    </li>
                    <li><input name="pwd" v-model="form.pwd" @blur="validateLogin()" id="pwd" type="password" /></li>

                    <li class="wz">验证码</li>
                    <li class="captch">
                        <input name="pagerandom" v-model="form.pagerandom" id="captch" type="text" />

                        <img alt="刷新验证码" title="点击刷新验证码" @click="loadCaptch" :src="captchUrl" style="cursor: pointer; width: 100px; height: 30px; float: right" />
                    </li>

                    <li class="wz">权限</li>
                    <li class="language">
                        <select name="cx" v-model="form.cx" id="cx">
                            <option :value="r" v-for="r in rules">{{ r }}</option>
                        </select>
                    </li>

                    <li class="l_btn">
                        <button type="submit" @click="login">登录</button>
                    </li>
                </ul>
            </form>
        </div>
    </div>
</template>
<style type="text/scss" scoped lang="scss">
    .login {
        width: 100%;
        height: 100%;
        position: relative;
        padding-top: 60px;
      background-image: url("./images/bg89.jpg");
    }

    .login .bg_img {
        width: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        overflow: hidden;
        z-index: -1;
    }

    .login .bg_img img {
        width: 1920px;
        height: 720px;
    }

    .login .logo {
        height: 43px;
        text-align: center;
        font-size: 22px;
    }

    .login .login_m {
        width: 473px;
        margin: 0px auto;
        margin-top: 20px;
        background: #ffffff;
        padding-bottom: 50px;
        box-shadow: 0px 0px 20px #4b4b4b;
        text-align: center;
        border-radius: 10px;
    }

    .login .login_m ul {
        width: 347px;
        padding-top: 30px;
        text-align: left;
        margin-left: 62px;
    }

    .login .login_m ul li {
        width: 100%;
        height: 40px;
        margin-top: 8px;
    }

    .login .login_m ul li.wz {
        height: 25px;
        line-height: 30px;
        font-size: 14px;
        color: #656565;
        background: none;
    }

    .login .login_m ul li input {
        display: block;
        width: 100%;
        height: 40px;
        margin-top: 6px;
        padding-left: 10px;
    }

    .login .login_m ul li.language {
        position: relative;
    }

    .login_m ul li.language select {
        display: block;
        width: 100%;
        height: 40px;
        line-height: 40px;
        margin-top: 6px;
    }

    .login_m ul li .notification {
        float: right;
        color: #9c0608;
    }

    .login_m ul li.captch input {
        display: inline-block;
        width: 40%;
    }

    .login_m ul li.l_btn {
        width: 345px;
        height: 51px;
        text-align: center;
        margin-top: 40px;
    }

    .login_m ul li.l_btn button {
        display: block;
        width: 345px;
        height: 51px;
        border: none;
        cursor: pointer;
        background: url(./images/btn_bg.png) no-repeat;
        line-height: 51px;
        font-size: 14px;
        color: #FFFFFF;
    }
</style>
<script>
    import config from "@/config";
    import { canLogin } from "@/stores";
    import { captch } from "@/utils/utils";

    export default {
        name: "login-index",
        data() {
            return {
                config,
                captchUrl: null,
                loading: false,
                captchCode: "",
                usernameNotification: "",
                pwdNotification: "",
                form: {
                    username: "",
                    pwd: "",
                    cx: "管理员",

                    /* 验证码段 */
                    pagerandom: "",
                    a: "a",
                    /* 验证码段 */
                },
                rules: ["管理员",  "员工"],
            };
        },
        watch: {},
        computed: {},
        methods: {
            validateLogin() {
                var form = this.form;
                var username = form.username;
                var pwd = form.pwd;

                if (username == "") {
                    this.usernameNotification = "帐号不能为空";
                    return false;
                }
                this.usernameNotification = "";
                if (pwd == "") {
                    this.pwdNotification = "密码不能为空";
                    return false;
                }
                this.pwdNotification = "";
                return true;
            },
            loadCaptch() {
                captch().then((res) => {
                    this.form.captchToken = res.token;
                    this.captchUrl = res.url;
                });
            },
            login() {
                if (this.validateLogin()) {
                    this.loading = true;
                    canLogin(this.form)
                        .then((res) => {
                            this.loading = false;
                            if (res.code == 0) {
                                this.$message.success("登录成功");
                                var redirect = this.$route.query.redirect;
                                if (redirect) {
                                    this.$router.replace(redirect);
                                } else {
                                    this.$router.replace("/admin/sy");
                                }
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                        .catch((err) => {
                            this.loading = false;
                            this.$message.error(err.message);
                        });
                }
            },
        },
        created() {
            this.form.cx = this.rules[0];
            this.loadCaptch();
        },
        mounted() {},
        destroyed() {},
    };
</script>
